class Details {
    constructor() {
        //获取节点
        this.img = document.querySelector('.left>div>img')
        this.main = document.querySelector('main')
        this.span = document.querySelector('.detailed > span')
        this.btn = document.querySelector('.btn')
        this.btu = document.querySelector('.btu')
        this.color = document.querySelectorAll('.color')
        this.dorr = document.querySelector('.dorr')
        //放大盒子
        this.right = document.querySelector('#magnifier .right')
        //原盒子
        this.left = document.querySelector('#magnifier .left  div')
        //遮罩层
        this.p = document.querySelector('#magnifier .left div p')
        //原图片
        this.conimg = document.querySelector('#magnifier .left div img')
        //放大图片
        this.bigimg = document.querySelector('#magnifier .right img')
        //选项盒子图片
        this.minimg = document.querySelectorAll('#magnifier .left ul img')
        //初始化
        this.init()
    }
    init() {
        this.request()
        this.look()
        this.over()
        this.out()
        this.onclick()
        this.mouse()
        this.header_footer()
    }
    //头尾互用
    header_footer() {
        $('header').load('/html/header.html', () => {
            /**显示用户登录与商品数量 */
            function login() {
                let num = 0
                //取出数据用户数据
                let list = JSON.parse(localStorage.getItem('userkey')) || []
                //取出商品数据
                let lis = JSON.parse(localStorage.getItem('cart'))
                for (let i = 0; i < lis.length; i++) {
                    num += lis[i].cart_number
                }
                if (list == '') {
                    $('.cartt').html('请登录')
                    $('.oidnum').html('0')
                } else {
                    $('.cartt').html(list.name + '&nbsp;&nbsp;' + '欢迎你')

                    $('.oidnum').html(num)
                }
                //一天清除数据
                setInterval(() => {
                    localStorage.removeItem('userkey')
                }, 60000)
            }
            login()
        })
        $('footer').load('/html/footer.html')
    }
    //获取我们点击商品的id
    getstr(id) {
        //获取url地址
        let str = location.search.slice(1)
        let arr = str.split('&')
        let obj = {}
        arr.forEach(item => {
            let Arr = item.split('=')
            obj[Arr[0]] = Arr[1]
        })
        return obj[id]

    }
    //请求数据
    request() {
        //获取的id变为number类型
        let id = this.getstr('id') - 0
        //如果没有获取到id
        if (!id) {
            //   跳转到首页
            location.href = '/index.html'
            return false
        } else {
            pAjax({
                    url: '/libs/goods.json'
                })
                .then(res => {
                    let data = JSON.parse(res)
                    data = data.slice(0, 200)
                    this.render(id, data)
                })
        }
    }
    //渲染
    render(id, data) {
        //在数据中找到id相同
        let res = data.find(item => {
            return item.goods_id == id
        })
        this.click(res, id)
        this.main.innerHTML = res.goods_introduce
        this.img.src = res.img_big_logo
        this.span.innerHTML = res.title
        this.bigimg.src = res.img_big_logo
        this.dorr.innerHTML = res.current_price
    }
    //加入购物车
    click(res, id) {
        //事件点击
        this.btn.onclick = () => {
            // this.btn.style.backgroundColor = 'red'
            //查看localStorage数据有没有
            let list = JSON.parse(localStorage.getItem('cart')) || []
            //如果没有就添加进去，让他数量等于1
            if (!list.length) {
                list.push(res)
                res.cart_number = 1
            } else {
                //判断存储中是否有一个满足，有一个满足就返回tuer
                let ser = list.some(item => {
                    return item.goods_id == id
                })
                if (ser) {
                    let index = list.findIndex(item => {
                        return item.goods_id == id
                    })
                    list[index].cart_number++
                } else {
                    list.push(res)
                    res.cart_number = 1
                }
            }
            //存储数据
            localStorage.setItem('cart', JSON.stringify(list))
            this.header_footer()
        }
    }
    //查看购物车
    look() {
        this.btu.onclick = () => {
            location.href = '/html/checkout.html'
        }
    }
    over() {
        //添加鼠标移入事件
        this.left.onmouseover = () => {
            this.p.style.display = 'block'
            this.right.style.display = 'block'
        }
    }
    out() {
        //添加鼠标移除事件
        this.left.onmouseout = () => {
            this.p.style.display = 'none'
            this.right.style.display = 'none'
        }
    }
    onclick() {
        //点击切换图片
        for (let i = 0; i < this.minimg.length; i++) {
            let _this = this
            this.minimg[i].onclick = function () {
                _this.conimg.src = this.getAttribute('src')
                _this.bigimg.src = this.getAttribute('src')
                for (let k = 0; k < _this.minimg.length; k++) {
                    _this.minimg[k].classList.remove('border')
                }
                _this.minimg[i].classList.add('border')
            }

        }
    }
    mouse() {
        //绑定鼠标移动事件
        this.left.onmousemove = (e) => {
            e = e || window.event
            console.log(555, parseInt(window.getComputedStyle(this.p).height) / 2);
            //获取移动距离
            let x = e.clientX - parseInt(window.getComputedStyle(this.p).width) / 2 - this.left.offsetLeft
            let y = e.pageY - parseInt(window.getComputedStyle(this.p).height) - this.left.offsetTop
            //边距判断
            if (x < 0) {
                x = 0
            } else if (x >= this.left.offsetWidth - this.p.offsetWidth) {
                x = this.left.offsetWidth - this.p.offsetWidth
            }

            if (y < 0) {
                y = 0
            } else if (y >= this.left.offsetHeight - this.p.offsetHeight) {
                y = this.left.offsetHeight - this.p.offsetHeight
            }
            //赋值
            this.p.style.left = x + 'px'
            this.p.style.top = y + 'px'

            //获取放大镜的移动比
            //就是原盒子宽高 减 遮罩层的宽高的值 除于 移动距离 等于 放大镜图片宽高 减去 放大镜盒子的宽高的值 除于 移动距离
            let box_x = ((this.bigimg.offsetWidth - this.right.offsetWidth) * x) / (this.left.offsetWidth - this.p.offsetWidth)
            let box_y = ((this.bigimg.offsetHeight - this.right.offsetHeight) * y) / (this.left.offsetHeight - this.p.offsetHeight)
            //赋值
            this.bigimg.style.left = -box_x + 'px'
            this.bigimg.style.top = -box_y + 'px'


            //获取图片的大小比例
            //就是遮罩层的尺寸 除以 原盒子尺寸 等于 放大镜盒子尺寸 除以 放大镜图片尺寸
            let imgwidth = this.left.offsetWidth * this.right.offsetWidth / this.p.offsetWidth
            let imgheight = this.left.offsetHeight * this.right.offsetHeight / this.p.offsetHeight
            //赋值
            this.bigimg.style.width = imgwidth + 'px'
            this.bigimg.style.height = imgheight + 'px'
        }
    }
}
new Details()